<template>
  <div style="display: flex;flex-direction: row;flex-wrap: wrap;align-content: flex-start;min-height: 20px;"
    :style="{
      'width': nodeModel.configDict.componentStyle.width/2+'px',
      'background': nodeModel.configDict.componentStyle.background,
      'flex-direction': nodeModel.configDict.componentStyle.flex_direction,
      'justify-content': nodeModel.configDict.componentStyle.justify_content,
      'align-items': nodeModel.configDict.componentStyle.align_items,
      'flex-wrap': nodeModel.configDict.componentStyle.flex_wrap,
      'overflow-x': 'scroll',
      'marginTop': nodeModel.configDict.componentStyle.marginTop/2+'px',
      'marginBottom': nodeModel.configDict.componentStyle.marginBottom/2+'px',
      'marginLeft': nodeModel.configDict.componentStyle.marginLeft/2+'px',
      'marginRight': nodeModel.configDict.componentStyle.marginRight/2+'px',
      'paddingTop': nodeModel.configDict.componentStyle.paddingTop/2+'px',
      'paddingBottom': nodeModel.configDict.componentStyle.paddingBottom/2+'px',
      'paddingLeft': nodeModel.configDict.componentStyle.paddingLeft/2+'px',
      'paddingRight': nodeModel.configDict.componentStyle.paddingRight/2+'px',
    }">
    <div v-if="nodeModel.configDict.itemList.length==0" style="height: 40px;line-height: 40px;width: 100%;text-align: center;">暂无数据</div>
    <div v-for="(item, index) in nodeModel.configDict.itemList" :key="index" 
    style="display: flex;"
    :style="{
      'width': nodeModel.configDict.itemStyle.width/2+'px',
      'background': nodeModel.configDict.itemStyle.background,
      'flex-direction': nodeModel.configDict.itemStyle.flex_direction,
      'justify-content': nodeModel.configDict.itemStyle.justify_content,
      'align-items': nodeModel.configDict.itemStyle.align_items,
      'marginBottom': nodeModel.configDict.itemStyle.marginBottomForItem/2+'px',
      'marginLeft': nodeModel.configDict.itemStyle.marginLeftForItem/2+'px',
      'paddingTop': nodeModel.configDict.itemStyle.paddingTopForItem/2+'px',
      'paddingBottom': nodeModel.configDict.itemStyle.paddingBottomForItem/2+'px',
      'paddingLeft': nodeModel.configDict.itemStyle.paddingLeftForItem/2+'px',
    }">
        <div v-if="item.fileType=='video'" :style="{
        'width': nodeModel.configDict.itemStyle.widthForCover1/2 + 'px', 
        'height': nodeModel.configDict.itemStyle.heightForCover1/2 + 'px',
        'borderRadius': nodeModel.configDict.itemStyle.borderRadiusForCover1/2 + 'px'}">
          <video id="media" src="http://www.sundxs.com/test.mp4" controls :width="nodeModel.configDict.itemStyle.widthForCover1/2 + 'px'" :height="nodeModel.configDict.itemStyle.heightForCover1/2 + 'px'"></video> 
        </div>
        <el-image v-else :src="item.coverUrl" fit="cover" style="flex-shrink: 0;"
        :style="{
        'width': nodeModel.configDict.itemStyle.widthForCover1/2 + 'px', 
        'height': nodeModel.configDict.itemStyle.heightForCover1/2 + 'px',
        'borderRadius': nodeModel.configDict.itemStyle.borderRadiusForCover1/2 + 'px'}"></el-image>

      <div style="display: flex;flex-direction: column;"
      :style="{
        'paddingTop': nodeModel.configDict.itemStyle.paddingTopForFlex2/2+'px',
        'paddingBottom': nodeModel.configDict.itemStyle.paddingBottomForFlex2/2+'px',
        'paddingLeft': nodeModel.configDict.itemStyle.paddingLeftForFlex2/2+'px',
        'paddingRight': nodeModel.configDict.itemStyle.paddingRightForFlex2/2+'px',
      }">
        <div v-if="nodeModel.configDict.itemStyle.isShowForText1 && item.text1" :style="{
          'marginTop': nodeModel.configDict.itemStyle.marginTopForText1/2+'px',
          'color': nodeModel.configDict.itemStyle.colorForText1,
          'font-size': nodeModel.configDict.itemStyle.fontsizeForText1/2 + 'px',
          'font-weight': nodeModel.configDict.itemStyle.fontweightForText1,
        }">{{item.text1}}</div>
        <div v-if="nodeModel.configDict.itemStyle.isShowForText2 && item.text2" :style="{
          'marginTop': nodeModel.configDict.itemStyle.marginTopForText2/2+'px',
          'color': nodeModel.configDict.itemStyle.colorForText2,
          'font-size': nodeModel.configDict.itemStyle.fontsizeForText2/2 + 'px',
          'font-weight': nodeModel.configDict.itemStyle.fontweightForText2,
        }">{{item.text2}}</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    components: {
        
    },
    props:{
        nodeModel:{
            type: Object,
            default: res=>{}
        },
    },
    data() {
      return {
        
      }
    },
    
    methods:{

    }
  }
</script>

<style lang="scss" scoped>

</style>